<template>
  <a-drawer
    :visible="formVisible"
    :width="500"
    :title="isEdit ? '编辑' : '新增'"
    @ok="submit"
    @cancel="close"
  >
    <div>
      <a-form
        ref="formRef"
        :model="form"
        :rules="rules"
        :label-col-props="{ span: 8 }"
        :wrapper-col-props="{ span: 16 }"
      >
        <a-form-item field="address" label="店铺地址">
          <a-input v-model="form.address" placeholder="请填写店铺地址" />
        </a-form-item>
        <a-form-item field="cityName" label="市">
          <a-input v-model="form.cityName" placeholder="请填写市" />
        </a-form-item>
        <a-form-item field="countyName" label="区(县)">
          <a-input v-model="form.countyName" placeholder="请填写区(县)" />
        </a-form-item>
        <a-form-item field="createId" label="创建人ID">
          <a-input v-model="form.createId" placeholder="请填写创建人ID" />
        </a-form-item>
        <a-form-item field="createTime" label="创建时间">
          <a-input v-model="form.createTime" placeholder="请填写创建时间" />
        </a-form-item>
        <a-form-item field="currentAmount" label="当前账户总金额">
          <a-input
            v-model="form.currentAmount"
            placeholder="请填写当前账户总金额"
          />
        </a-form-item>
        <a-form-item field="description" label="店铺描述">
          <a-input v-model="form.description" placeholder="请填写店铺描述" />
        </a-form-item>
        <a-form-item field="id" label="">
          <a-input v-model="form.id" placeholder="请填写" />
        </a-form-item>
        <a-form-item field="latitude" label="地理位置纬度">
          <a-input v-model="form.latitude" placeholder="请填写地理位置纬度" />
        </a-form-item>
        <a-form-item field="licenseUrl" label="营业执照图片">
          <a-input v-model="form.licenseUrl" placeholder="请填写营业执照图片" />
        </a-form-item>
        <a-form-item field="longitude" label="地理位置经度">
          <a-input v-model="form.longitude" placeholder="请填写地理位置经度" />
        </a-form-item>
        <a-form-item field="mallUserId" label="商城用户ID">
          <a-input v-model="form.mallUserId" placeholder="请填写商城用户ID" />
        </a-form-item>
        <a-form-item field="name" label="店铺名称">
          <a-input v-model="form.name" placeholder="请填写店铺名称" />
        </a-form-item>
        <a-form-item field="picUrl" label="店铺显示图片链接">
          <a-input v-model="form.picUrl" placeholder="请填写店铺显示图片链接" />
        </a-form-item>
        <a-form-item field="provinceName" label="省">
          <a-input v-model="form.provinceName" placeholder="请填写省" />
        </a-form-item>
        <a-form-item field="shopCategory" label="经营范围">
          <a-input v-model="form.shopCategory" placeholder="请填写经营范围" />
        </a-form-item>
        <a-form-item field="status" label="店铺状态, ">
          <a-input v-model="form.status" placeholder="请填写店铺状态, " />
        </a-form-item>
        <a-form-item field="telNum" label="电话号码">
          <a-input v-model="form.telNum" placeholder="请填写电话号码" />
        </a-form-item>
        <a-form-item field="updateTime" label="更新时间">
          <a-input v-model="form.updateTime" placeholder="请填写更新时间" />
        </a-form-item>
        <a-form-item field="wxMerchantId" label="微信商户号">
          <a-input v-model="form.wxMerchantId" placeholder="请填写微信商户号" />
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
  import { Message } from '@arco-design/web-vue';
  import { computed, ref } from 'vue';
  import { useVisible } from '@/hooks/visible';
  import { addShopInfo, updateShopInfo } from '@/api/mall/shopinfo';

  const formRef = ref();

  const initData = () => {
    return {
      address: '',
      cityName: '',
      countyName: '',
      createId: '',
      createTime: '',
      currentAmount: '',
      description: '',
      id: '',
      latitude: '',
      licenseUrl: '',
      longitude: '',
      mallUserId: '',
      name: '',
      picUrl: '',
      provinceName: '',
      shopCategory: '',
      status: '',
      telNum: '',
      updateTime: '',
      wxMerchantId: '',
    };
  };

  const rules = {
    createId: [
      {
        required: true,
        message: '创建人ID不能为空',
      },
    ],

    createTime: [
      {
        required: true,
        message: '创建时间不能为空',
      },
    ],

    currentAmount: [
      {
        required: true,
        message: '当前账户总金额不能为空',
      },
    ],

    id: [
      {
        required: true,
        message: '不能为空',
      },
    ],

    name: [
      {
        required: true,
        message: '店铺名称不能为空',
      },
    ],

    shopCategory: [
      {
        required: true,
        message: '经营范围不能为空',
      },
    ],

    status: [
      {
        required: true,
        message: '店铺状态, 不能为空',
      },
    ],

    updateTime: [
      {
        required: true,
        message: '更新时间不能为空',
      },
    ],
  };

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });

  const emit = defineEmits<{
    (e: 'update:visible', v: boolean): void;
    (e: 'refresh'): void;
  }>();

  const form = ref(props.formData);

  const { formVisible, close, open } = useVisible(props, emit);

  // 判断是编辑还是新增
  const isEdit = computed(() => !!form.value.id);

  const submit = async () => {
    formVisible.value = true;
    const validate = await formRef.value.validate();
    if (!validate) {
      if (isEdit.value) {
        await updateShopInfo(form.value).then(() => {
          Message.success('修改成功');
        });
      } else {
        await addShopInfo(form.value).then(() => {
          Message.success('添加成功');
        });
      }
      form.value = { ...initData };
      formVisible.value = false;
      emit('refresh');
    }
  };

  open(() => {
    const { id } = props.formData;
    if (id) {
      form.value = props.formData;
    } else {
      form.value = initData();
    }
  });
</script>
